<template>
  <div class="view-container">
    <header-module :left-custom="true" :padding="true">
      <template #left-con>
        <div>
          <span style="font-size: 16px; margin-right: 20px">
            {{ formData?.sellerDetail?.sellerName }}
          </span>
          <el-tag size="small" type="warning" style="margin-right: 20px">
            {{ getLabel('seller_factor_status', formData?.SellerFactorStatus) }}
          </el-tag>

          <el-tag size="small" type="warning" style="margin-right: 20px" v-if="formData?.flowStatus == 'REJECT_INITIATOR'">
             驳回
          </el-tag>
          <!-- formData?.flowStatus == 'REFUSE' || formData?.flowStatus == 'REPEAL' || -->
          <el-tag size="small" type="warning" style="margin-right: 20px" v-if="formData?.SellerFactorStatus === '2' && 
            ( formData?.flowStatus == 'DOING')">
            <span v-if="formData?.processDefinitionKey === 'sellerFactorChange'">变更</span>
            <span v-if="formData?.processDefinitionKey === 'sellerFactorBan'">作废</span>
            {{getLabel('approval_result', formData?.flowStatus)}}

          </el-tag>

        </div>
      </template>
      <template #btn>
        <el-button class="border-btn" size="small" @click="handlBack">返回</el-button>
        <el-button v-auth="{v: ['crm:marketing:cooperation:businessAgreement:dele'],
              bool:formData?.SellerFactorStatus === '-1' || formData?.SellerFactorStatus === '-2'}" type="primary"
          size="small" small @click="handlDelete(formData?.id)">
          删除
        </el-button>

        <el-button
          v-auth="{v: ['crm:marketing:cooperation:businessAgreement:edit'],
              bool:formData?.SellerFactorStatus === '-1' || formData?.SellerFactorStatus === '-2' || formData?.SellerFactorStatus === '-3'
               || formData?.flowStatus === 'REJECT_INITIATOR'}"
          type="primary" size="small" @click="handleEdit(formData,1)">
          编辑
        </el-button>

        <template v-if="formData?.SellerFactorStatus === '2' && formData?.flowStatus !== 'DOING'">
          <el-button v-auth="{v: ['crm:marketing:cooperation:businessAgreement:change']}" type="primary" size="small"
            @click="handleEdit(formData,2)">
            变更
          </el-button>

          <el-button v-auth="{v: ['crm:marketing:cooperation:businessAgreement:invalid']}" type="primary" size="small"
            @click="handleInvalid(formData)">
            作废
          </el-button>
        </template>
      </template>
    </header-module>

    <div class="main-content">
      <div class="list-container">
        <el-form :inline="true" class="filter-form-inline" label-position="right" label-width="115px" size="small">
          <el-row :gutter="0" style="margin-left: 20px; margin-right: 20px">
            <el-col>
              <item-title title="基本信息" />
            </el-col>

            <el-col :lg="8" :xs="4">
              <el-form-item label="商销客户名称：">
                <el-link :underline="false" type="primary" @click="handleToSeller">
                  {{formData?.sellerDetail?.sellerName }}
                </el-link>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="企业所在地区 ：">
                <span v-if="formData?.provinceName">
                  {{ formData?.provinceName }}/{{ formData?.cityName }}
                  /{{ formData?.areaName }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="详细地址：">
                <span>{{ formData?.sellerDetail?.address }}</span>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :xs="4">
              <el-form-item label="产品名称：">
                <span>{{ formData?.productInfoDetail?.productPopularName}}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="通用名：">
                <span>{{ formData?.productInfoDetail?.productName }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="包装规格：">
                {{formData?.productInfoDetail?.packSpecs }}
              </el-form-item>
            </el-col>

            <el-col :lg="8" :xs="4">
              <el-form-item label="生产厂家：">
                {{ formData?.productInfoDetail?.producer }}
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="交易价：">
                {{formData?.tradePrice}}
                <span v-if="formData?.productInfoDetail?.sellUnit">
                  元 /{{ getLabel('sell_unit', formData?.productInfoDetail?.sellUnit) }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="负责营销职员：">
                {{ formData?.headName }}
              </el-form-item>
            </el-col>

            <el-col :lg="8" :xs="4">
              <el-form-item label="创建人：">
                <span>{{ formData?.creatorName }}</span>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xs="4">
              <el-form-item label="创建时间：">
                <span>{{ dateFormat("yyyy-mm-dd HH:MM:SS", formData?.createdAt) }}</span>
              </el-form-item>
            </el-col>

            <el-col :lg="8" :xs="24">
              <el-form-item label="其他约定：">
                {{ formData?.remark }}
              </el-form-item>
            </el-col>

            <el-col>
              <item-title title="修改记录" />
            </el-col>
            <el-col>
              <operation-view mode="seller_factor" />
            </el-col>

          </el-row>
        </el-form>
      </div>

    </div>

    <newForm ref="newFormRef" :typeEdit="typeEdit" @succsess="succsess" />

    <invalid ref="invalidRef" @succsessBan="succsessBan" />

    <detail-drawer ref="detailDrawerRef" custom-title>
      <template #title>
        {{ formData?.sellerDetail?.sellerName }}
      </template>
      <template #contents>
        <seller :id="formData?.sellerDetail?.id" />
      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  toRefs,
} from "vue";
import { useRoute, useRouter } from "vue-router";
export default {
  components: {
    newForm: defineAsyncComponent(() => import("../modules/newForm.vue")),
    invalid: defineAsyncComponent(() => import("../modules/invalid.vue")),
    seller: defineAsyncComponent(() =>
      import("@CRM/views/commonView/seller/index.vue")
    ),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const route = useRoute();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      formData: {},
      newFormRef: null,
      typeEdit: "create",
      invalidRef: null,
      detailDrawerRef: null,
    });

    // 返回
    const handlBack = () => {
      router.go(-1);
    };

    const handleToSeller = () => {
      data.detailDrawerRef.open();
    };

    const handlDetail = (id) => {
      api.businessAgreement.BUSINESSAGREEMENT_DETAILS(id).then((res) => {
        if (res.code === 0) {
          data.formData = res.data.data;
        }
      });
    };

    //删除
    const handlDelete = (id) => {
      currentInstance.proxy
        .alertBox({ message: "删除数据后不可恢复,确定删除？" })
        .then(() => {
          api.businessAgreement.BUSINESSAGREEMENT_DELETE(id).then((res) => {
            if (res.code === 0) {
              currentInstance.proxy.customMessage({
                type: "success",
                message: "删除成功",
              });
              handlBack();
            } else {
              currentInstance.proxy.customMessage({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    };

    //作废
    const handleInvalid = (row) => {
      data.invalidRef.open(row);
    };

    //编辑
    const handleEdit = (val, num) => {
      var title = "";
      if (num === 1) {
        title = "编辑商业营销要素";
        data.typeEdit = "create";
      }
      if (num === 2) {
        title = "变更商业营销要素";
        data.typeEdit = "change";
      }
      data.newFormRef.open(title, val);
    };

    const succsess = () => {
      handlDetail(route.query.id);
    };

    const succsessBan = () => {
      handlDetail(route.query.id);
    };

    onMounted((_) => {
      if (route.query.id) {
        handlDetail(route.query.id);
      }
    });

    return {
      ...toRefs(data),
      handleToSeller,
      handlBack,
      handlDetail,
      handlDelete,
      handleInvalid,
      handleEdit,
      succsess,
      succsessBan,
    };
  },
};
</script>

<style lang="scss" scoped>
</style>